<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>06_常见的事件</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>

  <body>
    <div></div>

    <form action="" id="form">
      <input type="text" id="ip" name="doubleSleep" />
      <button>提交</button>
    </form>

    <script>
      // 都有哪些常见事件
      /*
        鼠标事件
            + click
            + contextmenu  鼠标右键单机事件
            + dblclick 双击鼠标

            + mousedown 鼠标按下事件
            + mouseup 鼠标抬起事件
            + mousemove 鼠标移动事件

            + mouseover 鼠标进入事件
            + mouseout  鼠标移除事件
            
            + monseenter  鼠标移入事件（功能与mouseover一直 但没有事件冒泡 后面会讲）
            + mouseleave  鼠标移除事件

        键盘事件
            + keydown
            + keyup
            + keypress

        浏览器事件
            + onload
            + onscroll
            + onresize

        表单事件
            + focus    获取焦点
            + blur     失去焦点
            + input    用户输入
            + change   文本改变（当失去焦点时）
        */

      var div = document.querySelector("div");

      div.onclick = function (e) {
        console.log("onclick");
      };

      // 点击鼠标右键
      div.oncontextmenu = function (e) {
        console.log("oncontextmenu");
      };

      // 鼠标移入div
      div.onmouseover = function (e) {
        console.log("onmouseover");
        this.style.backgroundColor = "yellow";
      };

      // 鼠标移出
      div.onmouseout = function (e) {
        console.log("onmouseout");
        this.style.backgroundColor = "pink";
      };

      /* 鼠标移入事件（没有冒泡） */
      div.onmouseenter = function (e) {
        console.log("onmouseenter 我进入元素");
      };

      // /* 鼠标移出事件（没有冒泡） */
      div.onmouseleave = function (e) {
        console.log("onmouseleave 我离开了元素");
      };

      /* 其它鼠标事件 */
      // double 双份的
      // 双击鼠标事件 double
      div.ondblclick = function (e) {
        console.log("ondblclick");
      };

      // 按下鼠标
      div.onmousedown = function (e) {
        console.log("onmousedown");
      };

      // 抬起鼠标
      div.onmouseup = function (e) {
        console.log("onmouseup");
      };

      // 移动鼠标
      div.onmousemove = function (e) {
        console.log("onmousemove");
      };

      // 注销鼠标移动事件
      div.onmouseover = null;
      div.onmouseout = null;
      div.onmouseenter = null;
      div.onmouseleave = null;

      /* input框的常用事件 */
      // var ip = document.getElementsByName("doubleSleep")[0]
      var ip = document.getElementById("ip");

      // 输入框得到焦点（聚焦事件）
      ip.onfocus = function (e) {
        console.log("input得到了焦点");
      };

      // blur 模糊的
      ip.onblur = function (e) {
        console.log("input失去了焦点");
      };

      // 用户输入事件
      ip.oninput = function (e) {
        console.log("oninput", this.value);
      };

      // 文本改变事件
      ip.onchange = function (e) {
        console.log("用户输入告一段落 onchange");
      };

      /* 表单的提交事件 */
      document.getElementById("form").onsubmit = function (e) {
        // 阻止表单跳转action对应的页面（浏览器对提交事件的默认行为）
        e.preventDefault()
        
        console.log("onsubmit");
      };
    </script>
  </body>
</html>
